<template>
  <div
    :class="[
      'pass-word-input-wrap',
      gutter ? 'pass-word-input-wrap-gutter' : '',
    ]"
    ref="wrapvueKeyboardInput"
  >
    <ul>
      <li
        v-for="(item, index) in showCol"
        :key="index"
        @click="focusHandler(item, index)"
        :style="{ marginLeft: gutter && index != 0 ? gutter : 0 }"
      >
        <span
          class="password-input__security"
          v-if="mask && showArray[index]"
        ></span>
        <span class="password-input__txt" v-else>{{ showArray[index] }}</span>
        <span
          class="password-input__cursor key-board-flash"
          v-if="!showArray[index] && index === noEmptyArray.length && isFocus"
        ></span>
      </li>
    </ul>
  </div>
</template>
<script>
import propsConfig from "@comp/input/propsConfig.js";
import EventKeys from "@enu/eventKeys.js";
import { getActiveInput, setCurrInput } from "@devass/js/blur.js";
import BaseMixins from "../../mixins/base";
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: propsConfig["passWordInput"],
  mixins: [BaseMixins],
  computed: {
    showArray() {
      if (this.value != undefined && String(this.value).length != 0) {
        return String(this.value).split("").slice(0, this.length);
      } else {
        return [];
      }
    },
    showCol() {
      console.log("this.length", this.length);
      var t = [];
      for (var i = 0; i < this.length; i++) {
        t.push(i);
      }
      return t;
    },
    noEmptyArray() {
      return this.showArray.filter((item) => item != undefined);
    },
  },

  created() {
    // this.$root.$on(EventKeys["vue-keyboard-cn-append-item"], (data) => {
    //   let activeInput = getActiveInput();
    //   if (activeInput.vm == this) {
    //     this.appendHandler(data);
    //   }
    // });
    // this.$root.$on(EventKeys["vue-keyboard-cn-append-delete"], () => {
    //   let activeInput = getActiveInput();
    //   if (activeInput.vm == this) {
    //     this.deleteHandler();
    //   }
    // });
  },
  methods: {
    deleteHandler() {
      let val = String(this.value);
      if (val.length) {
        let lastValue = val.slice(0, val.length - 1);
        let obj = {
          val: lastValue,
          vm: this.$refs.wrapvueKeyboardInput,
        };
        this.$emit("change", lastValue);
        this.$emit("input", obj);
      }
    },
    appendHandler(str) {
      console.log("password input append", str);
      if (String(str).length == 1 && String(this.value).length < this.length) {
        let lastValue = this.value + "" + str;
        console.log("password input append if", lastValue);
        let obj = {
          val: lastValue,
          vm: this.$refs.wrapvueKeyboardInput,
        };
        this.$emit("change", lastValue);
        this.$emit("input", obj);
      }
    },
    focusHandler(item, index) {
      setCurrInput({
        vm: this,
        dom: this.$refs["wrapvueKeyboardInput"],
      });
      this.keyBoardActive();
      this.isFocus = true;
      let obj = {
        val: this.value,
        vm: this.$refs.wrapvueKeyboardInput,
      };
      this.$emit("focus", obj);
    },
    keyBoardActive() {
      let obj = {
        keyBoardProps: this.keyBoardProps,
        inputProps: this.inputProps,
      };
      if (this.keyBoard) {
        this.keyBoard.getInputInfo = obj;
        this.keyBoard.show = true;
      } else {
        this.$root.$emit(EventKeys["vue-keyboard-cn-focus"], obj);
      }
    },
  },
};
</script>
<style lang="scss">
.pass-word-input-wrap {
  border: 1px solid #ebedf0;
  &.pass-word-input-wrap-gutter {
    border: none;
  }
  ul {
    height: 50px;
    display: flex;
  }
  &.gutter {
    border-color: transparent;
    li::after {
      border-right: 0;
    }
  }
  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  li {
    height: 50px;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    &::after {
      content: "";
      display: block;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      border-right: 1px solid #ebedf0;
    }
    @keyframes cursor-flicker {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    .password-input__cursor {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1px;
      height: 40%;
      background-color: #323233;

      transform: translate(-50%, -50%);

      animation: 1s cursor-flicker infinite;
    }
    .password-input__security {
      background: #000;
      width: 10px;
      height: 10px;
      border-radius: 100%;
    }
  }
}
</style>